<template>
    <div>
        <div ref="editor" style="text-align:left">
        </div>

    </div>
</template>

<script>
import axios from 'axios'
import E from 'wangeditor'

export default {
    name: 'MyEditor',
    data() {
        return {
            editorContent: '',
            editor: null
        }
    },
    props: {
        value: {
            type: String,
            required: true
        }
    },
    model: {
        prop: 'value',
        event: "change"
    },

    methods: {
        getContent: function () {
            alert(this.editorContent)
        },
        _initEditor(that) {
            var editor = new E(this.$refs.editor)
            editor.config.onchange = html => {
                this.editorContent = html;
                console.log(this.editorContent, "editorContent");
                this.$emit("change", this.editorContent);
            };
            editor.config.zIndex = 100
            // 上传图片配置
            const baseURL = '/api';
            function fileUpload(formData) {
                let token = localStorage.getItem('token');
                return axios.post(`${baseURL}/upload`, formData, {
                    headers: {
                        'Content-Type': 'multipart/form-data',
                        'Authorization': token
                    }
                });
            }

            editor.config.uploadImgServer = "/api/upload"; // 设置上传图片的地址
            editor.config.showLinkImg = false; // 隐藏“视频”tab
            editor.config.uploadImgMaxSize = 2 * 1024 * 1024; //上传视频的最大值
            //封装上传图片方法
            editor.config.customUploadImg = function (files, insert) {
                // files 是 input 中选中的文件列表
                // insert 是获取图片 url 后，插入到编辑器的方法
                // 上传代码返回结果之后，将图片插入到编辑器中
                // insert(imgUrl)
                //imgsNum： 已存在的图片  uploadImgNum : 上传的图片
                if (that.imgsNum + that.uploadImgsNum > 10) {
                    that.$alert("已上传图片超过最大的数量限制!");
                    return;
                }
                let formData = new FormData(); //创建格式
                formData.append("type", 1); //这里可以通过类型来区分，如 1 是图片，2是文档
                formData.append("file", files[0]); //添加属性
                console.log("图片属性", formData);
                //这是调用封装的接口
                fileUpload(formData).then(res => {
                    that.uploadImgsNum++;
                    let imgurl = res.data.data;
                    let url = imgurl; //这里是上传的地址+图片名字
                    console.log(res, imgurl, url, "返回的图片");
                    console.log("图片",imgurl);
                    
                    insert(url); //插入地址
                    // insert(res)
                });
                console.log(files, insert);
            };

            // 上传视频配置
            editor.config.uploadVideoServer = "/api/upload"; // 设置上传图片的地址
            editor.config.showLinkVideo = false; // 隐藏“视频”tab
            editor.config.uploadVideoMaxSize = 2 * 1024 * 1024; //上传图片的最大值
            function videoUpload(formData) {
                let token = localStorage.getItem('token');
                return axios.post(`${baseURL}/upload`, formData, {
                    headers: {
                        'Content-Type': 'multipart/form-data',
                        'Authorization': token
                    }
                });
            }
                editor.config.customUploadVideo = function (files, callback) {
                if (that.videosNum + that.uploadVideosNum > 5) {
                    that.$alert("已上传视频超过最大的数量限制!");
                    return;
                }
                let formData = new FormData();
                formData.append("type", 2); // 这里可以通过类型来区分，如 1 是图片，2是视频
                formData.append("file", files[0]);
                console.log("视频属性", formData);
                videoUpload(formData).then(res => {
                    that.uploadVideosNum++;
                    let videoUrl = res.data.data;
                    let url = videoUrl;
                    console.log(res, videoUrl, url, "返回的视频");
                    console.log('视频',videoUrl);
                    
                    callback(url);
                });
                console.log(files, callback);
            };


            editor.create()
            that.editor = editor
            editor.txt.html(that.value);
            this.$watch("value", () => {
                if (this.value !== this.editor.txt.html()) {
                    editor.txt.html(this.value);
                }
            });
        },
        change(e) {
            // v-model 指令是会给此节点添加一个input事件，我们在给富文本编辑器添加一个input事件，这么做在于，当输入内容后会获取到最新的内容，通过$emit 触发 父组件v-model所添加的input事件并将最新的内容传递过去，传递过去的值默认就会赋给v-model所绑定的属性。
            this.$emit("input", e.target.innerHTML());
        }
    },
    mounted() {
        this._initEditor(this)
        setTimeout(() => {
            //加延迟防止富文本渲染在图片渲染之前导致看不到内容
            this.editor.txt.html(this.value)
        }, 1000)
    }
}
</script>
<style scoped></style>